<template>
	<custom-nav :showBackArrow="true" title="动态详情"></custom-nav>
	<view class="page-postDetail" :style="pagePaddingTop">
		<view class="scview-news">
			<view class="post_container" v-if="postData.id_public_middle_table">
				<view class="news-title">
					<image class="avatar"
						:src="postData.mid_table_remark_009==-1?'/static/default_avatar.png':postData.mid_table_remark_009"
						mode="aspectFit"></image>
					<view class="u-flex-column">
						<view>{{ postData.mid_table_remark_007 == -1 ? '用户' : postData.mid_table_remark_007 }}</view>
						<view class="time">{{ formatDate(postData.mid_table_remark_040) }}</view>
					</view>
				</view>
				<view class="post_content">
					{{ postData.mid_table_remark_003 }}
					<view v-if="postData.mid_table_remark_005">
						<view class="one_image" v-if="postData.mid_table_remark_005.length === 1" @click.stop>
							<u--image @click="previewImg(postData.mid_table_remark_005)" :width="686" :height="387"
								:radius="24" :src="postData.mid_table_remark_005[0]">
								<template v-slot:loading>
									<u-loading-icon></u-loading-icon>
								</template>
							</u--image>
						</view>
						<view v-else class="grid_image" @click.stop>
							<u-album :multipleSize="216" :space="12" :rowCount="3" :maxCount="9"
								:urls="postData.mid_table_remark_005"></u-album>
						</view>
					</view>
				</view>
			</view>
			<view class="comment_title">
				<view class="line"></view>
				<view class="num">全部评论 ({{ commentList.length }})</view>
			</view>
			<view class="comment_container" v-for="(comment, cIndex) in commentList" :key="cIndex">
				<!-- {{ commentList }} -->
				<image class="left"
					:src="comment.mid_table_remark_011 == -1 ? '/static/default_avatar.png': comment.mid_table_remark_011"
					mode="aspectFit"></image>
				<view class="right">
					<view class="name">{{ comment.mid_table_remark_013 }}</view>
					<view class="content">
						{{ comment.mid_table_remark_014 }}
					</view>
					<view class="last_row">
						<view>{{ comment.time_insert }}</view>
						<view class="flex_row">
							<text v-if="cIndex === 0">第一楼</text>
							<view class="flex_row" style="margin-left: 34rpx;" @click.stop="setCommentLike(comment)">
								<image v-if="comment.save_data_003.length === 0" class="action_area_icon"
									src="/static/post/unLike.png" mode="aspectFit"></image>
								<image v-else class="action_area_icon" src="/static/post/like_selected.png"
									mode="aspectFit"></image>
								<view class="action_area_num">{{ comment.save_data_002 }}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 评论输入 -->
		<view class="comment_input" v-if="userInfo">
			<image class="user_avatar" :src="userInfo.weichat_img == -1 ? '/static/default_avatar.png' : userInfo.weichat_img"
				mode="aspectFit"></image>
			<view class="container-send">
				<input :always-embed="true" :adjustPosition="true" class="txt-send" v-model="modelValue"
					placeholder="请输入内容" placeholder-style="color:rgba(255,255,255,0.4)" @confirm="onConfirmComment" />
				<view class="wrap-search" @tap="$u.throttle(onConfirmComment, 1000)">
					<image class="icon-search" src="/static/paperPlane.png" mode="aspectFit"></image>
				</view>
			</view>
		</view>
	</view>
</template>
<script setup>
	import Base64 from "@/libs/js-base64/index.js"
	import {
		ref,
		nextTick
	} from "vue"
	import {
		onLoad,
		onShow,
		onReachBottom
	} from '@dcloudio/uni-app'
	import {
		getNavHeightTop
	} from "@/stores/navStore.js"
	import {
		showDecodeBase64,
		encodeBase64
	} from "@/utils/tool.js"
	import CustomNav from "@/components/custom-nav/index.vue"
	import {
		middleAPI
	} from "@/http/apis/middleAPI.js"
	import {
		useUser
	} from "@/hooks/useUser.js"
	import {
		showToast
	} from "@/utils/frameApi.js"
	const userStore = useUser();
	// 用户信息
	let userInfo = ref(null)
	userStore.getUserInfo().then(async res => {
		userInfo.value = res?.public_user_info || {};
		console.log('用户信息', userInfo.value)
	}, err => {
		console.log(err, '>>>userinfo')
	})

	// 动态详情
	let postId = ref("");
	let navHeightInfo = getNavHeightTop();
	const pagePaddingTop = ref({
		"paddingTop": navHeightInfo.navTotalHeight + 'px'
	})

	let postData = ref({})
	// let refContent = ref(null)

	// 获取动态详情	
	const getPostDetail = async () => {
		let queryData = {
			invoke_method: "public_load_middle_table_list",
			pre_db_para_middle_table_name: "public_middle_table_lite_mod_forum_bbs",
			type_middle_app: 62001,
			type_inner_app: 1001,
			is_online: 0,
			pre_db_para_begin_idx: 0,
			pre_db_para_length_4_list: 10,
			id_public_middle_table: postId.value
		}
		let response = await middleAPI(queryData).catch((err) => {
			console.log(err)
		})
		if (response) {
			let result = response.page_content[0] || {};
			result.mid_table_remark_003 = showDecodeBase64(result.mid_table_remark_003)
			if (result.mid_table_remark_005) {
				result.mid_table_remark_005 = result.mid_table_remark_005.split('-_-')
			}
			postData.value = result
			console.log('帖子数据', postData.value)
			getPostComment()
		}
	}

	// 加载评论信息
	let page = ref(1);
	const pageSize = 20
	let commentList = ref([]);
	let newsCacheList = [];
	let notMore = ref(false)
	const getPostComment = async () => {
		let queryData = {
			invoke_method: "public_load_middle_table_list",
			pre_db_para_middle_table_name: "public_middle_table_lite_mod_forum_bbs",
			type_middle_app: 63001,
			type_inner_app: 1001,
			is_online: 0,
			pre_db_para_begin_idx: (page.value - 1) * pageSize,
			pre_db_para_length_4_list: pageSize,
			mid_table_remark_015: postId.value,
			pre_cmd_para_show_main_info: "true",
			pre_cmd_para_show_answer_info: "true"
		}
		let response = await middleAPI(queryData).catch((err) => {
			let nextPage = page.value - 1;
			page.value = nextPage || 1;
			console.log(err)
		})
		if (response) {
			let result = response.page_content || [];
			if (result.length < pageSize) {
				notMore.value = true;
			}
			
			for (let i in result) {
				result[i].mid_table_remark_014 = showDecodeBase64(result[i].mid_table_remark_014)
			}

			newsCacheList = newsCacheList.concat(result)
			commentList.value = newsCacheList;
			console.log('帖子评论', commentList.value)
		}
	}

	const formatDate = (dateStr) => {
		const year = dateStr.slice(0, 4);
		const month = dateStr.slice(4, 6);
		const day = dateStr.slice(6, 8);
		return `${year}.${month}.${day}`;
	}

	function previewImg(urls) {
		uni.previewImage({
			urls
		})
	}

	const modelValue = ref('')

	function onConfirmComment() {
		if (modelValue.value.length === 0) {
			showToast({
				title: '请输入评论内容'
			})
			return
		}

		let queryParas = {
			invoke_method: "public_insert_or_update_middle_table",
			pre_db_para_middle_table_name: "public_middle_table_lite_mod_forum_bbs",
			is_online: 0,
			type_middle_app: 63001,
			type_inner_app: 1001,
			id_public_user_info: userInfo.value.id_public_user_info,
			mid_table_remark_014: encodeBase64(modelValue.value), // 评论内容
			mid_table_remark_015: postData.value.id_public_middle_table, // 帖子ID
			mid_table_remark_010: userInfo.value.id_public_user_info, // 评论用户ID
			mid_table_remark_011: userInfo.value.weichat_img, // 评论用户头像
			mid_table_remark_013: userInfo.value.nick_name, // 评论用户昵称
		}
		uni.showLoading()
		middleAPI(queryParas).then((res) => {
			uni.hideLoading()	
			page.value = 1;
			newsCacheList = [];
			commentList.value = []
			notMore.value = false;
			modelValue.value = ''
			showToast({
				title: '评论成功'
			})
			getPostComment()
		}, err => {
			uni.hideLoading()
			console.log(err)
		})
	}

	// 评论点赞/取消点赞
	function setCommentLike(item) {
		if (item.save_data_003.length === 0) {
			// 点赞
			let queryParas = {
				invoke_method: "public_insert_or_update_middle_table",
				pre_db_para_middle_table_name: "public_middle_table_lite_mod_forum_bbs",
				type_middle_app: 65001,
				type_inner_app: 1001,
				is_online: 0,
				id_public_user_info: item.id_public_user_info,
				mid_table_remark_010: item.id_public_user_info,
				mid_table_remark_015: item.mid_table_remark_015,
				mid_table_remark_016: userInfo.value.id_public_user_info,
				mid_table_remark_020: item.id_public_middle_table
			}
			middleAPI(queryParas).then((res) => {
				const data = res.page_content[0]
				console.log(data)
				item.save_data_002++;
				item.save_data_003 = [data]
				console.log(item)
			}, err => {
				console.log(err)
			})
		} else {
			// 取消点赞
			let queryParas = {
				invoke_method: "public_insert_or_update_middle_table",
				pre_db_para_middle_table_name: "public_middle_table_lite_mod_forum_bbs",
				type_middle_app: 65001,
				type_inner_app: 1001,
				is_online: 1,
				pre_db_para_id_public_middle_table: item.save_data_003[0].id_public_middle_table,
			}
			middleAPI(queryParas).then((res) => {
				item.save_data_002 = item.save_data_002 - 1;
				item.save_data_003 = []
			}, err => {
				console.log(err)
			})
		}
	}

	// 加载更多
	onReachBottom(() => {
		if (notMore.value) {
			return;
		}
		page.value += 1;
		getPostComment()
	})

	onLoad((options) => {
		postId.value = options?.id || "";
		if (!postId.value) {
			uni.navigateBack();
		} else {
			getPostDetail()
		}
	})
</script>

<style lang="less" scoped>
	view {
		box-sizing: border-box;
	}

	.flex_row {
		display: flex;
		align-items: center;
	}

	.page-postDetail {
		position: relative;
		width: 100%;
		display: flex;
		display: -wekbit-flex;
		min-height: 100vh;
		background-color: #182836;
		box-sizing: border-box;
		padding: 32rpx 0;

		.scview-news {
			position: relative;
			width: 100%;
			height: 100%;
			margin-bottom: 200rpx;

			.post_container {
				background: #213343;
				border-radius: 32rpx 32rpx 32rpx 32rpx;
				opacity: 1;
				border: 1rpx solid rgba(255, 255, 255, 0.2);
				padding: 32rpx;
				font-size: 30rpx;
				font-weight: 400;
				color: #FFFFFF;
				margin: 32rpx 0;
				display: flex;
				display: -webkit-flex;
				flex-direction: column;
				justify-content: space-between;

				.news-title {
					font-size: 28rpx;
					font-weight: bold;
					color: #FFFFFF;
					display: flex;
					align-items: center;
					margin-bottom: 28rpx;
					box-sizing: border-box;

					.avatar {
						width: 90rpx;
						height: 90rpx;
						border-radius: 50%;
						margin-right: 16rpx;
					}

					.time {
						margin-top: 12rpx;
						font-size: 24rpx;
						font-weight: 400;
						color: #B5B5B5;
					}
				}

				.post_content {
					width: 100%;
					font-size: 30rpx;
					font-weight: 400;
					color: #00FFF6;
					box-sizing: border-box;

					.one_image {
						margin-top: 20rpx;
					}

					.grid_image {
						margin-top: 20rpx;

						/deep/ image {
							border-radius: 16rpx;
						}
					}
				}
			}

			.comment_title {
				display: flex;
				align-items: center;
				margin: 0 32rpx;
				font-size: 32rpx;
				font-weight: bold;
				color: #FFFFFF;

				.line {
					width: 6rpx;
					height: 30rpx;
					background: #00FFF6;
					border-radius: 10rpx 10rpx 10rpx 10rpx;
					opacity: 1;
					margin-right: 8rpx;
				}

				.num {
					font-weight: bold;
					margin-left: 12rpx;
				}
			}

			.comment_container {
				padding: 32rpx 0;
				margin: 0 32rpx;
				display: flex;
				align-items: flex-start;
				box-sizing: border-box;
				border-bottom: 1rpx solid rgba(255, 255, 255, 0.2);

				.left {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
					background: #e1e1e1;
				}

				.right {
					margin-left: 16rpx;
					display: flex;
					align-items: flex-start;
					flex-direction: column;
					flex: 1;

					.name {
						font-size: 28rpx;
						font-weight: bold;
						color: #FFFFFF;
						margin-bottom: 16rpx;
					}

					.content {
						font-size: 28rpx;
						font-weight: 400;
						color: #FFFFFF;
					}

					.last_row {
						margin-top: 24rpx;
						display: flex;
						align-items: center;
						width: 100%;
						justify-content: space-between;
						font-size: 26rpx;
						font-weight: 400;
						color: #B5B5B5;

						.action_area_icon {
							width: 28rpx;
							height: 28rpx;
							margin-right: 7rpx;
						}

					}
				}
			}

		}

	}

	.comment_input {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background: #182836;
		box-shadow: 0rpx -3rpx 10rpx 1rpx rgba(255, 255, 255, 0.08);
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		padding: 32rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.user_avatar {
			border-radius: 50%;
			width: 80rpx;
			height: 80rpx;
			margin-right: 30rpx;
			background: #e1e1e1;
		}

		.container-send {
			position: relative;
			flex: 1;
			height: 80rpx;
			background: #213343;
			border-radius: 40rpx;
			flex-shrink: 0;
			padding-left: 30rpx;
			box-sizing: border-box;
			display: flex;
			display: -webkit-flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;

			.txt-send {
				position: relative;
				flex: 1;
				height: 100%;
				vertical-align: middle;
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				box-sizing: border-box;
			}

			.wrap-search {
				width: 64rpx;
				height: 64rpx;
				background: linear-gradient(180deg, #00FFF6 0%, #28C0FF 100%);
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;

				.icon-search {
					width: 36rpx;
					height: 36rpx;
				}
			}

		}
	}
</style>